<template>
  <div class="view-container">
    <el-tooltip
      effect="dark"
      placement="top"
      v-for="icon in icons"
      :key="icon"
      :content="svgItemHtml(icon)"
    >
      <div class="icon-item" @click="handleCopy(icon)">
        <iconfont :icon="icon"/>
        <p class="icon-name">{{icon}}</p>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { clickCopy } from '@/utils'
export default {
  data() {
    return {
      icons: []
    }
  },
  methods: {
    _getSvgFiles() {
      const context = require.context('@/common/iconfont', false, /\.svg$/)
      let icons = context.keys()
      this.icons = icons.map(item => item.replace(/\.\/(.*)\.svg/, '$1'))
    },
    svgItemHtml(icon) {
      return `<iconfont icon="${icon}"/>`
    },
    handleCopy(icon) {
      clickCopy.call(this, this.svgItemHtml(icon))
    }
  },
  created() {
    this._getSvgFiles()
  }
}
</script>

<style lang="stylus" scoped>
.icon-item
  display inline-block
  width 100px
  margin 20px 40px
  text-align center
  cursor pointer
  .svg-icon
    display inline-block
    font-size 32px
    color #333
  .icon-name
    margin 10px 0
    font-size 18px
    color #666
</style>
